<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="ECharts">
	<script type="text/javascript" src="../../js/jquery-2.0.3.min.js"></script>
	<script type="text/javascript" src="../../echarts/echarts.js"></script>
	<title>希望教育集团各校区位置显示</title>
	<style>
		html,
		body,
		#container {
			margin: 0;
			height: 100%;
		}

		ul {
			margin: 10px 0;
		}

		ul li {
			list-style: none;
		}

		ul li:nth-child(even) {
			margin-bottom: 10px;
		}

		.smBox {
			position: fixed;
			top: 0;
			right: 0;
			width: 260px;
			height: 100vh;
			background-color: #fff;
			overflow: scroll;
		}

		.smBox p {
			font-size: 20px;
			font-weight: 600;
			text-align: center;
		}
	</style>
</head>

<body>
	<div id="sichuan" style="height: 500px;width: 500px"></div>
	<div>22222222222222222fdgdfgdfgdfdfgg</div>
	<script>
        var data=[{
            name: '西南交通大学希望学院',    // 数据项名称，在这里指地区名称

            value: [        // 数据项值
                104.464176,     // 地理坐标，经度
                30.85227,      // 地理坐标，纬度
                6667         // 北京地区的数值
            ]
        }]
        $.get('../../json/sichuan.json', function (sichuan) {
            echarts.registerMap('sichuan', sichuan); // 注册地图
            option = {
                geo: {
                    map: 'sichuan',

                    itemStyle: {
                        normal: {
                            borderColor: 'rgba(147, 235, 248, 1)',
                            borderWidth: 2,
                            areaColor: {
                                type: 'radial',
                                x: 0.5,
                                y: 0.5,
                                r: 0.5,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            },
                            // shadowColor: 'rgba(128, 217, 248, 1)',
                            // shadowColor: 'rgba(255, 255, 255, 1)',
                            // shadowOffsetX: -2,
                            // shadowOffsetY: 2,
                            // shadowBlur: 10
                        },
                        emphasis: {
                            areaColor: '#eff3f1',
                            borderWidth: 0
                        }
                    }
                },
                series: [
                    { // 散点配置
                        name: '数量',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: data,
                        symbol:'circle' /*'image://../../img/小雨.png'*/,
                        symbolSize: function (val) {
                            return 6;
                        },
                        rippleEffect: {
                            period: 2.5, //波纹秒数
                            brushType: 'fill', //stroke(涟漪)和fill(扩散)，两种效果
                            scale: 6 //波纹范围
                        },
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#080159'
                            }
                        }
                    }
                ]
            };
            var mapChart = echarts.init(document.getElementById('sichuan'));
            mapChart.setOption(option);

        })


        /*var option = {
            geo: {
                map: 'sichuan',

                itemStyle: {
                    // 定义样式
                    normal: {					// 普通状态下的样式
                        areaColor: '#323c48',
                        borderColor: '#111'
                    },
                    emphasis: {					// 高亮状态下的样式
                        areaColor: '#2a333d'
                    }
                },
                series: [
                    { // 散点配置
                        name: '数量',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: data,
                        symbol: 'effectScatter',
                        symbolSize: function (val) {
                            return val[2];
                        },
                        rippleEffect: {
                            period: 2.5, //波纹秒数
                            brushType: 'fill', //stroke(涟漪)和fill(扩散)，两种效果
                            scale: 2 //波纹范围
                        },
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#080159'
                            }
                        }
                    }
                ]
            },
            backgroundColor: '#404a59',  		// 图表背景色
        }
        mapChart.setOption(option);*/
		/*var lnglats = [{
			lag: [104.464176, 30.85227],
			info: {
				a: '西南交通大学希望学院',
				b: 6667
			}
		},
		{
			lag: [106.648414, 26.141441],
			info: {
				a: '贵州财经大学商务学院',
				b: 8886
			}
		},
		{
			lag: [112.428944, 37.686386],
			info: {
				a: '山西医科大学晋祠学院',
				b: 5676
			}
		},
		{
			lag: [106.234179, 38.248411],
			info: {
				a: '银川能源学院',
				b: 5555
			}
		},
		{
			lag: [104.237294, 31.327658],
			info: {
				a: '四川天一学院',
				b: 8889
			}
		},
		{
			lag: [103.677797, 30.613744],
			info: {
				a: '四川文化传媒职业学院',
				b: 4566
			}
		},
		{
			lag: [104.614362, 30.084804],
			info: {
				a: '四川希望汽车职业学院',
				b: 4556
			}
		},
		{
			lag: [107.52869, 26.677083],
			info: {
				a: '贵州应用技术职业学院',
				b: 4556
			}
		},
		{
			lag: [103.923514, 30.782185],
			info: {
				a: '四川托普信息技术职业学院',
				b: 4646
			}
		},
		{
			lag: [107.52869, 26.677083],
			info: {
				a: '鹤壁汽车工程职业学院',
				b: 4646
			}
		},
		{
			lag: [120.845826, 31.462491],
			info: {
				a: '苏州托普信息职业技术学院',
				b: 35345
			}
		},
		{
			lag: [104.310604, 30.605909],
			info: {
				a: '四川希望汽车技师学院',
				b: 4354
			}
		}
		];*/
	</script>
</body>

</html>